終於要來解釋第2天的分頁內容
在網站https://laihao2.com/Home/Index2
這裡分頁所使用的資料庫是
Northwind跟pubs北風資料庫
北風資料庫(Northwind)是微軟提供的一個範例資料庫
北風資料庫(Northwind):這裡要用到的資料類型
北風資料庫(Northwind): 這裡要用到的內容
這裡要特別注意的地方~
這裡要特別注意的地方~
這裡要特別注意的地方~
很重要所以說三次!!!
分頁:下載套件
下載完要將專案就是整個Microsoft Visual Studio重啟
下載完要將專案就是整個Microsoft Visual Studio重啟
下載完要將專案就是整個Microsoft Visual Studio重啟
很重要所以說三次!!!
這樣專案才可以抓到下載的套件
ASP.NET開發操作流程:資料表設定好>再寫程式:加入資料庫>串聯資料庫>產生Models裡面類別檔dao>按:建置>Controllers裡面的Entities>產生畫面View
資料表設定好>再寫程式:加入資料庫>串聯資料庫>(這裡前面的步驟可以參考前幾天)
產生Models裡面類別檔dao>第一個檔案
產生Models裡面類別檔dao>第2個檔案
按:建置>(參考前面)
Web config的第2個資料庫連線 (其實到網站的部屬連線也是改這樣的形式)
Controllers裡面的Entities>
public ActionResult Index2(int page = 1)
{
int currentPage = page < 1 ? 1 : page;
var products = _db2.Products2.OrderBy(m => m.ProductID).ToList();
var result = products.ToPagedList(currentPage, pageSize);
return View(result);
}
解釋程式碼:
這段代碼是一個 ASP.NET MVC 控制器中的 Index2
方法,用於分頁顯示產品數據。我們來逐步解釋:
public ActionResult Index2(int page = 1)
ActionResult
方法,表示這是一個用於處理網頁請求的控制器方法。Index2
。int page = 1
:這是一個帶有默認值的參數,表示當前的分頁頁碼,默認為第 1 頁。如果用戶沒有提供 page
參數,則使用默認的 1
。int currentPage = page < 1 ? 1 : page;
page
小於 1,currentPage
被設置為 1;否則,它將使用傳入的 page
參數。var products = _db2.Products2.OrderBy(m => m.ProductID).ToList();
_db2
中獲取 Products2
表的所有產品,並按 ProductID
升序排列。OrderBy(m => m.ProductID)
:根據 ProductID
排序。ToList()
:將查詢結果轉換為一個 List
,即一個可枚舉的產品列表。var result = products.ToPagedList(currentPage, pageSize);
products
列表進行分頁處理。ToPagedList
是一個分頁擴展方法,它將大列表按頁分成小列表,通常需要傳入當前頁 currentPage
和每頁顯示的數量 pageSize
。pageSize
可能是一個事先定義的變量,決定了每頁顯示多少條記錄。return View(result);
result
傳遞給視圖,顯示在前端頁面上。ProductID
排序後,根據傳入的分頁參數(page
)進行分頁處理,並將結果傳遞給視圖用於顯示。產生畫面View
產生的程式碼
@{ Layout = "~/Views/Shared/_Layout.cshtml"; }
@{
ViewBag.Title = "Contact12";
}
<div class="farm-wrapper">
<h3>作品-奢華網站</h3>
<h3>建置中</h3>
<div class="farm-content">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="@Url.Content("~/Content/css/reset.css")">
@section styles {
<link rel="stylesheet" href="@Url.Content("~/Content/css/farm-style.css")">
}
<title>奢華風格網站</title>
<style>
/* 全域樣式 */
body {
font-family: 'Playfair Display', serif; /* 高級字體 */
background-color: #121212;
color: #e5e5e5;
margin: 0;
padding: 0;
}
/* 標題樣式 */
h1 {
font-size: 60px;
color: #d4af37; /* 金色 */
text-align: center;
margin-top: 50px;
}
/* 導航樣式 */
nav ul {
list-style: none;
padding: 0;
margin: 0;
text-align: center;
background-color: #222;
}
nav li {
display: inline-block;
margin: 0 15px;
}
nav a {
text-decoration: none;
color: #e5e5e5;
padding: 15px 25px;
transition: all 0.3s ease;
}
nav a:hover {
color: #d4af37;
border-bottom: 2px solid #d4af37;
}
/* 英雄區樣式 */
.hero {
text-align: center;
background-image: url('hero-image.jpg');
background-size: cover;
background-position: center;
padding: 150px 0;
}
.hero h2 {
font-size: 48px;
color: #fff;
text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.7);
margin-bottom: 10px;
}
.hero p {
font-size: 24px;
color: #ccc;
}
/* 產品區樣式 */
.products {
max-width: 1000px;
margin: 0 auto;
padding: 60px 0;
text-align: center;
}
.slider {
display: flex;
justify-content: space-around;
}
.slide {
width: 30%;
padding: 20px;
background-color: #333;
color: #fff;
transition: transform 0.5s ease;
}
.slide.active {
transform: scale(1.1);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<header>
<h1>奢華品牌</h1>
<nav>
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">產品</a></li>
<li><a href="#">關於我們</a></li>
<li><a href="#">聯絡我們</a></li>
</ul>
</nav>
</header>
<main>
<div class="hero">
<img src="~/templates/date_img.jpg" alt="My Photo" style="width: 200px; height: auto; float: left; " />
<h2>探索奢華</h2>
<p>品味頂級生活</p>
</div>
<section class="about-us">
<h2>關於我們</h2>
<p>我們的品牌創立於2024年,致力於提供頂級品質的奢華產品。我們的使命是將卓越的工藝和獨特的設計融合,為每一位顧客帶來無與倫比的體驗。</p>
<p>我們的願景是成為全球領先的奢華品牌,提供創新且經典的產品,讓每一位顧客都能感受到我們的獨特魅力。</p>
</section>
<section class="products">
<h2>我們的產品</h2>
<div class="slider">
<div class="slide active">
<h3>產品 1</h3>
<p>這是一款融合了現代設計和傳統工藝的奢華產品,采用高品質的材料,細節精緻,完美展現您的品味。</p>
</div>
<div class="slide">
<h3>產品 2</h3>
<p>我們的產品 2 結合了創新的技術和精湛的工藝,為您帶來無與倫比的舒適體驗和高端感受。</p>
</div>
<div class="slide">
<h3>產品 3</h3>
<p>產品 3 是我們最受歡迎的款式之一,其獨特的設計和優質的材料,使其成為任何場合的完美選擇。</p>
</div>
</div>
</section>
<section class="testimonials">
<h2>客戶評價</h2>
<blockquote>
<p>“這個品牌的產品真是太棒了!每次使用都感覺到奢華與舒適。” - 張小姐</p>
</blockquote>
<blockquote>
<p>“我非常滿意我的購物體驗,服務一流,產品質量超出預期。” - 李先生</p>
</blockquote>
</section>
<section class="news">
<h2>最新消息</h2>
<article>
<h3>新品發布:奢華系列 2024</h3>
<p>我們很高興宣布即將推出全新奢華系列,包含多款精美設計的產品,敬請期待!</p>
<a href="#">閱讀更多</a>
</article>
<article>
<h3>品牌故事:從創立到現在</h3>
<p>了解我們的品牌歷程和未來展望,探索我們如何成為領先的奢華品牌。</p>
<a href="#">閱讀更多</a>
</article>
</section>
</main>
<script>
const slides = document.querySelectorAll('.slide');
let currentSlide = 0;
const nextSlide = () => {
slides[currentSlide].classList.remove('active');
currentSlide = (currentSlide + 1) % slides.length;
slides[currentSlide].classList.add('active');
};
// 定時切換
setInterval(nextSlide, 3000);
</script>
</body>
</html>
解釋程式碼:
這段代碼是一個 ASP.NET MVC 的視圖文件,使用了 Razor 語法和 PagedList
擴展庫來顯示分頁的產品列表。我們來逐步解釋它的組成部分:
@*@model IEnumerable<WebApplication5.Models.Products> *@
IEnumerable<WebApplication5.Models.Products>
),表示視圖將接收 Products
對象的集合。@model IPagedList<WebApplication5.Models.Products>
IPagedList<WebApplication5.Models.Products>
表示這個視圖使用了分頁的 Products
列表,IPagedList
是 PagedList
庫提供的接口,支持分頁的功能。@using PagedList
和 @using PagedList.Mvc
PagedList
提供了分頁處理功能,而 PagedList.Mvc
提供了分頁的輔助方法(如 PagedListPager
)。<p> @*@Html.ActionLink("Create New", "Create")*@ </p>
<table class="table">
class="table"
可能用於附加樣式(比如引入 Bootstrap 表格樣式)。<tr>
<th>@Html.DisplayNameFor(model => model.FirstOrDefault().ProductName)</th>
<th>@Html.DisplayNameFor(model => model.FirstOrDefault().SupplierID)</th>
<th>@Html.DisplayNameFor(model => model.FirstOrDefault().CategoryID)</th>
<th>@Html.DisplayNameFor(model => model.FirstOrDefault().QuantityPerUnit)</th>
<th>@Html.DisplayNameFor(model => model.FirstOrDefault().UnitPrice)</th>
<th>@Html.DisplayNameFor(model => model.FirstOrDefault().UnitsInStock)</th>
<th>@Html.DisplayNameFor(model => model.FirstOrDefault().UnitsOnOrder)</th>
<th>@Html.DisplayNameFor(model => model.FirstOrDefault().ReorderLevel)</th>
<th>@Html.DisplayNameFor(model => model.FirstOrDefault().Discontinued)</th>
<th></th>
</tr>
@Html.DisplayNameFor
自動獲取 Products
模型中字段的顯示名稱。FirstOrDefault()
取 Products
集合中的第一個元素來獲取字段名稱,只用來展示標題。@foreach (var item in Model)
{
<tr>
<td>@Html.DisplayFor(modelItem => item.ProductName)</td>
<td>@Html.DisplayFor(modelItem => item.SupplierID)</td>
<td>@Html.DisplayFor(modelItem => item.CategoryID)</td>
<td>@Html.DisplayFor(modelItem => item.QuantityPerUnit)</td>
<td>@Html.DisplayFor(modelItem => item.UnitPrice)</td>
<td>@Html.DisplayFor(modelItem => item.UnitsInStock)</td>
<td>@Html.DisplayFor(modelItem => item.UnitsOnOrder)</td>
<td>@Html.DisplayFor(modelItem => item.ReorderLevel)</td>
<td>@Html.DisplayFor(modelItem => item.Discontinued)</td>
</tr>
}
foreach
循環遍歷 Model
(即分頁後的 Products
列表),為每個 item
生成一行數據。@Html.DisplayFor
顯示產品的各個字段內容,如 ProductName
, SupplierID
, CategoryID
等。@Html.PagedListPager(Model, page => Url.Action("Index2", new { page }))
@Html.PagedListPager
是 PagedList.Mvc
提供的分頁導航控件。Model
(即 IPagedList
)來生成分頁導航鏈接,並且會生成調用 Index2
方法的 URL,通過 page
參數指定當前頁碼。PagedListPager
控件實現分頁功能。跟按紐連結_影片
https://laihao2.com/Home/Contact2
這裡社群媒體>按 影片
這裡沒有用到資料庫所以只有
Controllers裡面的Entities>
public ActionResult Contact2()
{
ViewBag.Message = "Your contact page.";
return View();
}
解釋程式碼
這段代碼是一個 ASP.NET MVC 控制器中的 Contact2
方法,用於處理與 "Contact" 頁面相關的請求。我們來逐步解釋它的結構和功能:
public ActionResult Contact2()
ActionResult
方法,意味著它可以通過 HTTP 請求訪問。Contact2
,通常與 "Contact" 頁面相關聯,但這里用了不同的名稱 Contact2
,可能是另一個類似的頁面。ViewBag.Message = "Your contact page.";
ViewBag
,它是一個動態對象,允許你在控制器中向視圖傳遞數據。ViewBag.Message
被設置為 "Your contact page."
,這條消息可以在視圖中顯示,通常用於頁面標題或說明文本。return View();
Contact2.cshtml
的視圖文件。View()
方法會將 ViewBag
中的數據一起傳遞給視圖。Contact2
頁面(類似“聯系我們”頁面)的請求,設置一條消息,並將頁面渲染給用戶。產生畫面View
@{
ViewBag.Title = "Contact2";
}
<h3></h3>
<!DOCTYPE html>
<html lang="zh-Hant-TW">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="@Url.Content("~/Content/css/reset.css")">
<title>程式教學</title>
<style>
img {
border-radius: 50%;
}
body {
background-color: lightskyblue;
margin: 0;
padding-top: 60px; /* 為導覽列騰出空間 */
}
.content-container {
text-align: center;
max-width: 600px;
margin: 0 auto; /* 水平居中 */
padding: 20px;
}
dl {
margin-left: 20px;
}
dd {
margin-left: 20px;
}
.button-container {
display: flex;
flex-direction: column;
gap: 10px;
align-items: center;
}
.pink-button {
background-color: pink;
color: black;
padding: 10px 20px;
text-decoration: none;
border-radius: 5px;
display: inline-block;
text-align: center;
transition: background-color 0.3s;
width: 200px;
}
.pink-button:hover {
background-color: #ff69b4;
}
</style>
</head>
<body>
<div class="content-container">
<h1>程式教學</h1>
<p>
<img src="~/templates/webphoto.jpg" alt="My Photo" style="width:200px; height:auto;" />
</p>
<p>
因為有實戰經驗,因此也可以教學程式,<br>
歡迎大家觀賞我的相關作品影片!
</p>
<div class="button-container">
<a href="https://www.youtube.com/watch?v=w92Ja66w5os" class="pink-button">Asp.net教學影片</a>
<a href="https://www.youtube.com/watch?v=WDVCQnh2LEk" class="pink-button">Java教學影片1</a>
<a href="https://www.youtube.com/watch?v=VjkGPFXigqo" class="pink-button">Java教學影片2</a>
</div>
</div>
</body>
</html>
解釋程式碼
這段代碼是一個 ASP.NET MVC 視圖文件,結合了 HTML 和 Razor 語法,主要用於顯示一個程式教學頁面。它使用 CSS 來控制頁面的樣式,添加了圖片、文本和幾個鏈接按鈕,指向外部的教學影片。我們來逐步解析它的內容:
@{ ViewBag.Title = "Contact2"; }
ViewBag.Title
設置為 "Contact2"
,這是頁面的標題。<title>
標簽,通常顯示在瀏覽器標簽頁上。<h3></h3>
<h3>
標題標簽,雖然沒有內容,但可以在以後填入標題文本。可以刪除或填入合適的標題。<!DOCTYPE html> ... <html lang="zh-Hant-TW">
zh-Hant-TW
表示台灣繁體中文)。<meta charset="UTF-8">
UTF-8
,確保網頁支持多語言字符集。<link rel="stylesheet" href="@Url.Content("~/Content/css/reset.css")">
reset.css
,通常用於重置瀏覽器的默認樣式,以保證不同瀏覽器之間的顯示一致性。@Url.Content()
是 Razor 語法,用來生成項目內資源的正確 URL。img { border-radius: 50%; }
:將圖片圓角化,形成圓形。body { background-color: lightskyblue; }
:將頁面背景色設置為淺天藍色,頁面頂部留有 60px 空白,以騰出空間。content-container { text-align: center; max-width: 600px; margin: 0 auto; }
:容器居中,寬度不超過 600px。dl
和 dd
:定義列表的樣式。.button-container { display: flex; flex-direction: column; }
:按鈕容器使用 flex 布局,垂直排列按鈕並設置間距。.pink-button { background-color: pink; }
:按鈕的初始顏色為粉紅色,懸停時變為亮粉色。<div class="content-container">
:這是頁面的主要容器,內容包括標題、圖片、介紹文本和教學影片按鈕。
<h1>程式教學</h1>
:主標題為“程式教學”。<img src="~/templates/webphoto.jpg" alt="My Photo" style="width:200px; height:auto;" />
:顯示一張圖片,寬度為 200px,且根據寬度自動調整高度,border-radius
將使圖片呈圓形。<p>
:介紹部分的文本內容,用 <br>
強制換行。文中介紹作者有實際的程式教學經驗。<div class="button-container">
:包含三個教學影片的鏈接按鈕。
<a>
標簽表示一個鏈接,使用 .pink-button
樣式,使按鈕有一致的外觀和懸停效果。大家明天見~